<script setup lang="ts">
import ArrowVue from "@/components/icon/Arrow.vue";
</script>
<template>
    <div class="expert-list flex flex-wrap">
        <div class="expert-item">
            <div class="expert-port">
                <img src="https://img.cctvch.cn/uploads/9c281c8d04955986782a37fe289939f2.png" alt="">
            </div>
            <h4 class="expert-title font-m font-bold color-title">
                <span>杜祥琬（主任）</span>
            </h4>
            <ul class="expert-explain-list">
                <li class="expert-explain-item font font-normal">中国工程院院士</li>
                <li class="expert-explain-item font font-normal">中国工程院原副院长</li>
            </ul>
        </div>
        <div class="expert-item">
            <div class="expert-port">
                <img src="https://img.cctvch.cn/uploads/5056874f25f02022b8dd187948a6a531.png" alt="">
            </div>
            <h4 class="expert-title font-m font-bold color-title">
                <span>刘燕华</span>
            </h4>
            <ul class="expert-explain-list">
                <li class="expert-explain-item font font-normal">国务院参事室参事</li>
                <li class="expert-explain-item font font-normal">科技部原副部长</li>
            </ul>
        </div>
        <div class="expert-item">
            <div class="expert-port">
                <img src="https://img.cctvch.cn/uploads/52d85b840c82a22cb7eeb84641953fe1.png" alt="">
            </div>
            <h4 class="expert-title font-m font-bold color-title">
                <span>石  军 </span>
            </h4>
            <ul class="expert-explain-list">
                <li class="expert-explain-item font font-normal">全国政协经济委员会副主任</li>
            </ul>
        </div>
        <div class="expert-item">
            <div class="expert-port">
                <img src="https://img.cctvch.cn/uploads/762ed31494e4aee6866b20312a8c4738.png" alt="">
            </div>
            <h4 class="expert-title font-m font-bold color-title">
                <span>吴  吟</span>
            </h4>
            <ul class="expert-explain-list">
                <li class="expert-explain-item font font-normal">国家能源局原副局长</li>
            </ul>
        </div>
        <div class="expert-item">
            <div class="expert-port">
                <img src="https://img.cctvch.cn/uploads/85aa57047000087a627f0223a10c924b.png" alt="">
            </div>
            <h4 class="expert-title font-m font-bold color-title">
                <span>任树本</span>
            </h4>
            <ul class="expert-explain-list">
                <li class="expert-explain-item font font-normal">国家发展改革委环资司原司长</li>
            </ul>
        </div>
        <div class="expert-item">
            <div class="expert-port">
                <img src="https://img.cctvch.cn/uploads/813845b8d650caeb6300d5c5e4c04ac9.png" alt="">
            </div>
            <h4 class="expert-title font-m font-bold color-title">
                <span>潘家华</span>
            </h4>
            <ul class="expert-explain-list">
                <li class="expert-explain-item font font-normal">中国社科院学部委员 </li>
                <li class="expert-explain-item font font-normal">中国社科院城市发展与环境研究所所长</li>
            </ul>
        </div>
        <div class="expert-item">
            <div class="expert-port">
                <img src="https://img.cctvch.cn/uploads/18d17b1d2ffbcde53eaa2064e2f56f9a.png" alt="">
            </div>
            <h4 class="expert-title font-m font-bold color-title">
                <span>徐锭明</span>
            </h4>
            <ul class="expert-explain-list">
                <li class="expert-explain-item font font-normal">国务院参事 </li>
                <li class="expert-explain-item font font-normal">国家发改委原能源局局长</li>
            </ul>
        </div>
        <!-- 加载更多 -->
        <div class="expert-more">
            <a href="https://lscylm.cn" target="_blank">
                <p class="font-m">更多委员介绍</p>
                <p class="font-m">请访问官网</p>
                <section class="read">
                    <section class="arrow arrow-1">
                        <ArrowVue color="#9195A3"></ArrowVue>
                    </section>
                    <section class="arrow arrow-2">
                        <ArrowVue color="#9195A3"></ArrowVue>
                    </section>
                </section>
            </a>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.expert-list {
    margin-top: 10px;

    .expert-item {
        margin-right: 80px;
        margin-bottom: 60px;
        width: 300px;

        &:nth-child(4) {
            margin-right: 0px;
        }

        .expert-port {
            width: 150px;
            height: 150px;
            border-radius: 12px;
            box-shadow: 0px 5px 26px 3px rgba(98, 102, 117, 0.1500);

            img {
                display: block;
                width: 100%;
                height: 100%;
            }
        }

        .expert-title {
            margin: 28px 0 18px;
        }

        .expert-explain-list {
            .expert-explain-item {
                line-height: 22px;

                &::before {
                    content: "";
                    display: inline-block;
                    margin-right: 6px;
                    margin-top: -4px;
                    width: 4px;
                    height: 4px;
                    background: #000;
                    vertical-align: middle;
                    border-radius: 50%;
                }
            }
        }
    }
    .color-title {
        span {
            background-image: linear-gradient(to right, #252086 0%, #e60012 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }

    // 加载更多
    .expert-more {
        padding-top: 178px;

        p {
            line-height: 22px;
            color: #000;
        }

        .read {
            margin-top: 16px;
            overflow: hidden;
            position: relative;
            width: 40px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            color: #9195a3;
            border-left: 1px solid #9195a3;

            .arrow {
                position: absolute;
                top: 50%;
                transform: translate(-50%, -50%);
                transition: all 0.36s ease;
            }

            .arrow-1 {
                left: 50%;
                color: #9195a3;
            }

            .arrow-2 {
                left: -50%;
                color: #9195a3;
            }
        }

        &:hover {
            cursor: pointer;

            .arrow-1 {
                left: 150%;
                color: #9195a3;
            }

            .arrow-2 {
                left: 50%;
                color: #9195a3;
            }
        }
    }
}
</style>